<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
    <!-- <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> -->
</head>
<style>
    #imgReader {
        display: none;
    }

    .previewBox,
    .previewBoxRound {
        box-shadow: 0 0 5px #adadad;
        width: 100px;
        height: 100px;
        margin-top: 30px;
        overflow: hidden;
        margin-left: calc(50% - 50px);
    }

    .previewText {
        text-align: center;
    }

    .previewBoxRound {
        border-radius: 50%;
        /*设置为圆形*/
    }

    .box {
        display: flex;
    }

    .preview {
        margin-left: 20px;
        width: 200px;
    }
</style>

<body>
    <div class="box" style="display: none;">
        <input type="file" accept="image/*" id="imgReader">
        <img id="cropImg">
        <!-- 3.两个用于预览的div  -->
        <div class="preview">
            <div class="previewText">裁剪预览</div>
            <div class="previewBox"></div>
            <div class="previewBoxRound"></div>
            <div class="previewbtn">上传</div>
        </div>
    </div>
    <button id="btn">上传图片</button>
    <button id="text">11111111111111111</button>
    <!-- <script type="module">
        import Cropper from './index.js';
    </script> -->
    <script>
        const btnBox = document.querySelector('#btn');
        const box = document.querySelector('.box');
        const image = document.getElementById('cropImg');
        const imgReaderBox = document.querySelector('#imgReader')
        const previewbtn = document.querySelector('.previewbtn')
        var CROPPER
        let name
        btnBox.addEventListener('click', () => {
            imgReaderBox.click()
        })
        imgReaderBox.addEventListener('change', e => {
            btnBox.style.display = 'none';
            box.style.display = 'flex';
            let reader = new FileReader();
            if (e.target.files[0]) {
                reader.readAsDataURL(e.target.files[0]);
                reader.onload = res => {
                    console.log(e.target.files[0]);
                    name = e.target.files[0].name
                    let dataURL = reader.result;
                    image.src = dataURL
                    CROPPER = new Cropper(image, {
                        aspectRatio: 16 / 16,
                        viewMode: 0,
                        minContainerWidth: 500,
                        minContainerHeight: 500,
                        dragMode: 'move',
                        preview: [document.querySelector('.previewBox'),
                        document.querySelector('.previewBoxRound')]
                    })
                }

            }
        })
        previewbtn.addEventListener('click', GetData)
        const test = document.querySelector('#text')
        test.addEventListener('click',GetData1)
        function GetData1(){
            var client = new OSS.Wrapper({
                    region: 'oss-cn-shenzhen',//你的oss地址 ，具体位置见下图
                    // accessKeyId: 'LTAI5tMuwSCG53n5QRidFEg7',//你的ak
                    accessKeyId: 'LTAI5tAz7qbdUqi1RmCyGCc2',//你的ak
                    // accessKeySecret: 'UAp6zZTIJ1Wph9lOubvtGEJrSEltLW',//你的secret
                    accessKeySecret: 'IurRqk6vpOdjs4jAYBzZ23UaZ0o5By',//你的secret
                    //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注销掉
                    bucket: 'wt-oss-p2-video'//你的oss名字
                });
                client.list({
                    'max-keys': 10
                }).then(function (result) {
                    console.log(result);
                }).catch(function (err) {
                    console.log(err);
                });
        }
        function GetData() {
            //getCroppedCanvas方法可以将裁剪区域的数据转换成canvas数据
            CROPPER.getCroppedCanvas({
                maxWidth: 4096,
                maxHeight: 4096,
                fillColor: '#fff',
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high',
            }).toBlob(function (blob) {  //压缩图片
                console.log('压缩后的图', blob);
                // var newFile = new File([blob], name, { type: blob.type });
                // console.log(newFile);
                const SRC = URL.createObjectURL(blob)
                const aBox = document.createElement('a')
                aBox.href = SRC
                aBox.download = decodeURI('xxxxx')
                document.body.appendChild(aBox)
                aBox.click()
                document.body.removeChild(aBox)
                URL.revokeObjectURL(SRC)
                // var formData = new FormData();
                // formData.append('file', newFile, newFile.name);
                // var client = new OSS.Wrapper({
                //     region: 'oss-cn-shenzhen',//你的oss地址 ，具体位置见下图
                //     accessKeyId: 'LTAI5tMuwSCG53n5QRidFEg7',//你的ak
                //     //accessKeySecret: 'UAp6zZTIJ1Wph9lOubvtGEJrSEltLW',//你的secret
                //     //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注销掉
                //     bucket: 'myworld-cc'//你的oss名字
                // });
                // client.list({
                //     'max-keys': 10
                // }).then(function (result) {
                //     console.log(result);
                // }).catch(function (err) {
                //     console.log(err);
                // });
                // client.multipartUpload(`img/${name}`,newFile).then(tRes=>{
                //     console.log(tRes);
                // })
            }, "image/jpeg", 0.6);
        }
    </script>
</body>

</html>